<!DOCTYPE html>
<html>

<head>
    <title>测试新的 API 结构</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .test-result {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
        }

        .success {
            background-color: #d4edda;
            border-color: #c3e6cb;
        }

        .error {
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }

        button {
            margin: 5px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1>测试新的 Mask API 结构</h1>

    <div>
        <h3>测试 URL:</h3>
        <p><code>http://10.69.64.129:8000/api/results/copd/seg_result/masks/prostate_source_axial_LR_registered/data</code>
        </p>
        <button onclick="testNewApi()">测试新 API</button>
        <button onclick="testWithHead()">测试 HEAD 请求</button>
        <button onclick="testWithGet()">测试 GET 请求</button>
    </div>

    <div id="results"></div>

    <script>
        const testUrl = 'http://10.69.64.129:8000/api/results/copd/seg_result/masks/prostate_source_axial_LR_registered/data';

        async function testNewApi() {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = '<div class="test-result">正在测试新 API...</div>';

            try {
                // 尝试 GET 请求
                const response = await fetch(testUrl, { method: 'GET' });

                const result = `
                    <div class="test-result ${response.ok ? 'success' : 'error'}">
                        <strong>${response.ok ? '✅ 成功' : '❌ 失败'}</strong><br>
                        状态码: ${response.status}<br>
                        状态文本: ${response.statusText}<br>
                        内容类型: ${response.headers.get('content-type') || 'N/A'}<br>
                        内容长度: ${response.headers.get('content-length') || 'N/A'} bytes
                    </div>
                `;

                resultsDiv.innerHTML = result;

                if (response.ok) {
                    console.log('✅ 新 API 测试成功！');
                } else {
                    console.log('❌ 新 API 测试失败:', response.status, response.statusText);
                }

            } catch (error) {
                resultsDiv.innerHTML = `
                    <div class="test-result error">
                        <strong>❌ 请求失败</strong><br>
                        错误: ${error.message}
                    </div>
                `;
                console.error('请求失败:', error);
            }
        }

        async function testWithHead() {
            try {
                const response = await fetch(testUrl, { method: 'HEAD' });
                console.log('HEAD 请求结果:', response.status, response.statusText);
                alert(`HEAD 请求: ${response.status} ${response.statusText}`);
            } catch (error) {
                console.error('HEAD 请求失败:', error);
                alert(`HEAD 请求失败: ${error.message}`);
            }
        }

        async function testWithGet() {
            try {
                const response = await fetch(testUrl, {
                    method: 'GET',
                    headers: { 'Range': 'bytes=0-1023' }
                });
                console.log('GET 请求结果:', response.status, response.statusText);
                alert(`GET 请求: ${response.status} ${response.statusText}`);
            } catch (error) {
                console.error('GET 请求失败:', error);
                alert(`GET 请求失败: ${error.message}`);
            }
        }

        // 页面加载时自动测试
        window.onload = () => testNewApi();
    </script>
</body>

</html>